<template>
  <view class="container-gray">
    <view class="history-item" v-if="historyList.length > 0">
      <uni-steps :options="historyList" @delete="openModel" @edit="editHistory"></uni-steps>
    </view>
    <view class="add-container">
      <view class="add-btn" @click="addHistory">
        <image src="../../static/icon/icon-add.png" class="icon-add" />
        <view class="add-text">添加工作经历</view>
      </view>
    </view>

    <model v-if="hidden">
      <view class="model-content">
        <view>确定删除？</view>
      </view>
      <view class="model-footer">
        <button class="model-footer-btn cancel" @click="hidden = false">取消</button>
        <button type="primary" class="model-footer-btn primary" @click="deleteHistory()">确定</button>
      </view>
    </model>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
export default {
  data() {
    return {
      historyList: [],
      hidden: false,
      delId: null
    }
  },
  onShow() {
    this.getHistoryList()
  },
  onReachBottom() {
    this.getHistoryList()
  },
  methods: {
    // 获取用户工作经历
    async getHistoryList() {
      const params = {
        userId: uni.getStorageSync('userId')
      }
      let res = await post_md5('/usercenter-app/workhistory/list', params)
      this.historyList = res.data
    },
    // 新增工作经历
    addHistory() {
      uni.navigateTo({
        url: 'work-history-add-or-update'
      })
    },

    // 修改工作经历
    editHistory(id) {
      uni.navigateTo({
        url: 'work-history-add-or-update?id=' + id
      })
    },

    openModel(id) {
      this.hidden = true
      this.delId = id
    },

    // 删除工作经历
    deleteHistory(id) {
      const params = {
        id: this.delId
      }
      post_md5('/usercenter-app/workhistory/delete', params).then(res => {
        this.hidden = false
        uni.showToast({ title: '已删除' })
        this.getHistoryList()
      })
    }
  }
}
</script>

<style lang="less">
.history-item {
  padding: 20upx 40upx;
  margin-bottom: 20upx;
  background: #ffffff;
  border-top: 1px solid #ededed;
}

.add-container {
  background: #ffffff;

  .add-btn {
    display: flex;
    padding: 30upx;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;

    .icon-add {
      width: 40upx;
      height: 40upx;
    }

    .add-text {
      margin-left: 20upx;
    }
  }
}
</style>
